<template>
  <el-dialog v-model="dialogVisible" :title="props.formTitle" width="800px" :z-index="1000" @close="dialogFormClose">
    <el-form :key="formValue.id" :model="formValue" label-width="120px" label-position="left">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="规则类型" prop="resource">
            <el-radio-group v-model="formValue.menu_type" size="small">
              <el-radio-button :label="1" :value="1">菜单</el-radio-button>
              <el-radio-button :label="2" :value="2">接口</el-radio-button>
              <el-radio-button :label="3" :value="3">按钮</el-radio-button>
              <el-radio-button :label="4" :value="4" disabled>外链</el-radio-button>
              <el-radio-button :label="5" :value="5" disabled>iframe</el-radio-button>
              <el-radio-button :label="6" :value="6" disabled>插件</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="父级分类">
            <el-cascader
              v-model="formValue.pid"
              style="width: 100%"
              :options="menuOptions"
              :props="{ checkStrictly: true, emitPath: false }"
              clearable
              filterable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="formValue.menu_type === 1 ? '菜单名称' : '接口名称'" required>
            <el-input v-model="formValue.menu_name" />
          </el-form-item>
        </el-col>

        <template v-if="formValue.menu_type === 2">
          <el-col :span="12">
            <el-form-item label="请求方式" required>
              <el-select v-model="formValue.methods">
                <el-option value="">请求</el-option>
                <el-option value="GET">GET</el-option>
                <el-option value="POST">POST</el-option>
                <el-option value="PUT">PUT</el-option>
                <el-option value="DELETE">DELETE</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接口地址" required>
              <el-input v-model="formValue.api_url" />
            </el-form-item>
          </el-col>
        </template>
        <el-col v-if="formValue.menu_type === 1" :span="12">
          <el-form-item label="路由地址" required>
            <el-input v-model="formValue.menu_path" />
          </el-form-item>
        </el-col>
        <el-col v-if="formValue.menu_type === 1" :span="12">
          <el-form-item label="权限标识" required>
            <el-input v-model="formValue.auth_mark" />
          </el-form-item>
        </el-col>
        <el-col v-if="formValue.menu_type === 1" :span="12">
          <el-form-item label="图标">
            <dk-icon-input v-model="formValue.icon" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序">
            <el-input v-model="formValue.sort" />
          </el-form-item>
        </el-col>
        <el-col v-if="formValue.menu_type === 1" :span="12">
          <el-form-item label="状态">
            <el-switch v-model="formValue.is_show" :active-value="1" :inactive-value="0" active-text="显示" inactive-text="隐藏" />
          </el-form-item>
        </el-col>
        <el-col v-if="formValue.menu_type === 1" :span="12">
          <el-form-item label="是否为隐藏菜单">
            <el-switch v-model="formValue.is_show_path" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="flex justify-end gap-2">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="disabled" @click="onSubmit">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, defineProps, defineEmits, defineExpose, onMounted, computed, watch, toRefs } from 'vue'
import { getOption, setMenuSave } from '@/api/system/menu'
import mitt from '@/utils/mitt'
import { ElMessage } from 'element-plus'

defineOptions({
  name: 'DkMenuForm'
})

const props = defineProps({
  label: {
    default: '',
    type: String
  },
  value: {
    default: '',
    type: String
  },
  formData: {
    default: () => ({
      menu_type: 1
    }),
    type: Object
  },
  formTitle: {
    default: '',
    type: String
  }
})

const emit = defineEmits(['update:formData'])

// 数据
const dialogVisible = ref(false)
const menuOptions = ref([])
const disabled = ref(false)
const formValue = reactive({})

// 计算属性和监听
watch(
  () => props.formData,
  (newVal) => {
    if (newVal) {
      Object.assign(formValue, newVal)
    }
  },
  { deep: true, immediate: true }
)

// 方法
const dialogFormClose = () => {
  // 向父组件发送重置信号
  emit('update:formData', { menu_type: 1 })
}

const getMenuOptions = async () => {
  try {
    const res = await getOption()
    menuOptions.value = res.data
  } catch (error) {
    console.error(error)
  }
}

const onSubmit = async () => {
  // 提交保存
  disabled.value = true
  console.log('11111')
  try {
    const res = await setMenuSave(formValue)
    ElMessage.success(res.msg)
    dialogVisible.value = false
    await getMenuOptions()
    mitt.emit('getMenus')
    disabled.value = false
  } catch (error) {
    disabled.value = false
  }
}

// 暴露方法和属性
defineExpose({
  dialogVisible
})

// 生命周期
onMounted(() => {
  getMenuOptions()
})
</script>

<style lang="scss" scoped></style>
